<!--  -->
<template>
  <div class="news">
    <div class="main">
      <van-swipe-cell v-for="(item, index) in list" :key="(item, index)">
        <dl>
          <dt>
            <img :src="item.img" alt="" />
          </dt>
          <dd>
            <div class="nae">
              <h4>{{ item.name }}</h4>
              <span>{{ item.data }}</span>
            </div>
            <div class="tit">
              <span>{{ item.title }}</span>
            </div>
          </dd>
        </dl>
        <template #right>
          <van-button
            class="delete-button"
            square
            type="danger"
            text="删除"
            @click="del(item.id)"
          />
          <van-button
            class="delete-button"
            square
            type="primary"
            text="置顶"
            @click="zhi"
          />
        </template>
      </van-swipe-cell>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      list: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    del: function(id) {
      var index = this.list.findIndex((item) => {
        if (item.id == id) {
          return true;
        }
      });
      this.list.splice(index, 1);
    },
    zhi() {},
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    axios.get("/message").then((res) => {
      console.log(res.data.data);
      this.list = res.data.data;
    });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>
.news {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #eee;
  .main {
    width: 100%;
    flex: 1;
    overflow-y: auto;
    .van-swipe-cell {
      margin-bottom: 5px;

      dl {
        width: 100%;
        height: 80px;
        margin-bottom: 5px;
        background: #fff;
        display: flex;
        align-items: center;
        padding: 0 10px;
        dt {
          img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-right: 10px;
          }
        }
        dd {
          width: 100%;
          .nae {
            width: 100%;
            height: 30px;
            display: flex;
            justify-content: space-between;
          }
        }
      }
      .delete-button {
        height: 100%;
      }
    }
  }
}
</style>
